<template>
  <view>
    <u-popup
      width="90%"
      v-model="value"
      mode="center"
      zIndex="9999"
      border-radius="14"
      :maskCloseAble="false"
      safeAreaInsetBottom
    >
      <view class="privacy-containter" v-if="appConfig">
        <view class="icon_class"><image src="/static/images/icon_shouquan.png" class="icon_shouquan" mode="aspectFill"></view>
        <view class="privacy-containter-tital"
          >第三方用户信息授权说明</view
        >
        <view class="privacy-containter-tip">
          授权后，小程序开发者将收集你的手机号，为你提供相关服务。开发者严格按照<text class="primary" @click="handleOpen">《{{
            appConfig.name || ""
        }}小程序隐私保护指引》</text>处理你的个人信息如你发现开发者不当处理你的个人信息，可进行<text class="primary">投诉</text>。
        </view>

        <button
          class="btn-comfirm"
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
        >
          同意并继续
        </button>
        <button class="btn-cancel" @click="handlecancel">取消</button>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {};
  },
  computed: {
    ...mapGetters(["appConfig"]),
  },
  methods: {
    handleOpen() {
      wx.openPrivacyContract({
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    handlecancel() {
      uni.showToast({
        title: "须同意后才可继续使用",
        icon: "none",
        duration: 2000 // 延长显示时间确保用户看到
      });

      // 延迟跳转，确保提示信息能被用户看到
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }, 2000);
    },
    handleAgreePrivacyAuthorization() {
      this.$emit("input", false);
      uni.showTabBar();
      // if (this.appConfig.is_open_nearby) {
      //   // this.initLocationFunc();
      // }
    },
  },
};
</script>
<style lang="scss">
.privacy-containter {
  //background-color: white;
  background: linear-gradient(to bottom, #d1dfff ,#ffffff,#ffffff,#ffffff, #ffffff);
  padding: 60rpx;
  &-tital {
    text-align: center;
    font-weight: 500;
    font-size: 36rpx;
  }
  &-tip {
    margin: 50rpx 0;
  }
  &-outline {
    font-weight: 500;
    margin-bottom: 15rpx;
  }
  &-read {
    margin-top: 15rpx;
  }
  .btn-comfirm {
    background-color: #0066ff;
    color: white;
    height: 80rpx;
    line-height: 80rpx;
    margin-top: 50rpx;
    border-radius: 36rpx;
  }
  .btn-cancel {
    background-color: #f7f7f7;
    height: 80rpx;
    line-height: 80rpx;
    margin-top: 30rpx;
    border-radius: 36rpx;
  }
  .primary{
    color: #0066ff;

  }
  .icon_class{
    text-align: center;
  }
  .icon_shouquan{
    width: 160rpx;
    height: 120rpx;
  }
}
</style>
